<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mtk {
            width: 300px;
            height: 200px;
            background-color: pink;
            /* 水平垂直居中 */
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            /* 隐藏 */
            display: none;
        }
        
        th,
        td {
            width: 200px;
            height: 40px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <!-- <button onclick="f1(this)">删除</button>
    <ul>
        <li>光头强</li>
        <li>光头强</li>
        <li>光头强</li>
    </ul> -->
    <button onclick="show()">添加</button>
    <!--模态框  -->
    <div class="mtk">
        <p>用户名:<input type="text" class="yhm"></p>
        <p>年龄:<input type="text" class="nl"></p>
        <button onclick="add()">确定</button><button onclick="hide()">取消</button>
    </div>

    <table>
        <thead>
            <tr>
                <th>用户名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</body>
</html>
<script>
    var mtk = document.querySelector('.mtk');
    var yhm = document.querySelector('.yhm');
    var nl = document.querySelector('.nl');
    var tbody = document.querySelector('tbody');

    function show() {
        // 显示模态框
        mtk.style.display = 'block'
    }

    function hide() {
        // 隐藏模态框
        mtk.style.display = 'none'
    }


    // 添加
    function add() {
        // 1 创建元素
        var tr = document.createElement('tr');
        // 2 赋值
        tr.innerHTML = `
          <td>${yhm.value}</td>
            <td>${nl.value}</td>
            <td><button onclick='sc(this)'>删除</button></td>
        `;
        // 3|添加
        tbody.appendChild(tr)
    }


    // 删除
    function sc(aaa) {
        // tbody里面删除tr
        tbody.removeChild(aaa.parentNode.parentNode)
    }
    // var ul=document.querySelector('ul')
    // function f1(aaa){
    //     ul.removeChild(ul.children[0])
    //     if(ul.children.length==0){
    //         aaa.disabled=true
    //     }
    // }
</script>